<template>
  <div class="many">
    <h4>额度介绍</h4>

    <ul class="manyList">
      <li v-for="item in packageList" :key="item.id">
        <p>{{ item.tokensTitle }}</p>
        <span>价格</span>
        <div>
          {{ item.price }}元
        </div>
        <button @click="payMentAAC(item.id,item.price)">立即购买</button>
      </li>
    </ul>

    <PayMent 
    v-if="payModalShow"
    :orderInfo="packageId" 
    :price="packagePrice" 
    :payModalShow=payModalShow 
    @close="
    payModalShow=false"></PayMent>
  </div>
</template>
<script lang='ts' setup>
import { getPackageList, type IgetPackageList} from '@/api/account';
import { onBeforeMount, ref, reactive } from 'vue';
import PayMent from '@/components/payMent/index.vue';

onBeforeMount(()=>{

  getPaymentList()
})

const packageList = ref<IgetPackageList[]>()
const getPaymentList = async()=>{
   const res = await getPackageList();
  console.log(res);
  if(res.data) {
    packageList.value = res.data
  }
}

type id = number| null 
type price = number| null
const packageId = ref<id>()
const packagePrice = ref<price>()
const payModalShow = ref(false)
const payMentAAC = async (id:number,price:number)=>{
  payModalShow.value = true;
  packageId.value = id
  packagePrice.value = price
}







</script>
<style scoped lang='scss'>
        h4 {
          font-size: 1.5vw;
          margin-bottom: 1.5vw;
        }
.manyList {
  display: flex;
  flex-wrap: wrap;

  li{

    padding: 45px 37px;
    border: 0.15vw solid #DBDBDB;
    margin: auto 1%;
    border-radius: 10px;
    box-sizing: border-box;

width: 22%;
min-width: 205px;
  height: 335px;
  box-shadow: 0px 6px 6px 1px rgba(145, 145, 145, 0.1216);
    border: 0.05vw solid transparent;
    transition: all 0.4s;
    box-shadow: 0 0 1px 1px rgba($color: #000000, $alpha: .2);
   &:hover{
    border: 0.05vw solid #c90000;
    box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: .4);
    }
    p{
      // font-size: 1vw;
      font-weight: 700;
    }
    span{
      display: block;
      color: gray;
      margin: 20px 0;
    }
    div{
      font-size: 18px;
      color: #DC985E;
      font-weight: 700;
    }
    button{
      cursor: pointer;
      width: 100%;
    
      height: 45px;
        margin-top: 64px;
        background: linear-gradient(180deg, #FCC994 0%, #F6A967 100%);
        border-radius: 4px 4px 4px 4px;
        border: none;

        font-weight: 400;
          font-size: 16px;
          color: #FFFFFF;
    }

  }

}



</style>
